import React, { useContext, useEffect, useState } from "react";
import {useNavigate,Outlet} from 'react-router-dom';
import { Button, Container, Nav, Navbar } from "react-bootstrap";
import Articles from "./articles";
import PostEditor from "./editor";
import { AuthenticationContext } from "../../context";


function Blog(){

    const navigate = useNavigate();

    const [hasLogin,setHasLogin] = useState(false);
    const {userInfo} = useContext(AuthenticationContext);

    useEffect(()=>{
           if(userInfo.token && userInfo.token.length > 0){
             setHasLogin(true);
           }
    },[])

    const viewMyArticles = ()=> {
        console.debug("View my articles!");
        navigate("/blog/articles")
    }

    const createNewArticle = ()=> {
        console.debug("create a new article!");
        navigate("/blog/editor")
    }

    const onLogin = ()=> {
        console.debug("login ..");
        navigate("/user/login");
    }

    return (<Container className="d-flex-column m-0 p-0" fluid>
     <Navbar className="m-0 p-0 justify-content-end" bg="light" data-bs-theme="light">
        <Container className="p-1" fluid>
                <Navbar.Brand href="#home"><h2>Blog</h2></Navbar.Brand>
                <Container className="d-flex me-0 justify-content-end p-0">
                    <Button variant="link"  href="/blog/articles">我的文章</Button>
                    <Button variant="link"  onClick={createNewArticle}>创建文稿</Button>
            </Container>
        </Container>
      </Navbar>
      <Outlet/>
    </Container>)
}

export {Articles, PostEditor};

export default Blog;

